<template>
    <div class="MusicDetail">
        <img :src="playList[playListIndex].al.picUrl" alt="" class="bigImg">
        <div class="detailTop">
            <span>
                <svg class="icon" aria-hidden="true" @click="updateDetailShow">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
            </span>
            <span class="musicName">
                <Vue3Marquee>
                    {{playList[playListIndex].name}}
                </Vue3Marquee>
                <p class="audor">{{playList[playListIndex].ar.name}}</p>
            </span>
            <span>
                <svg class="icon fengxiang" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
            </span>
            
        </div>
        <div class="detailContent">
            <img src="@/assets/needle-ab.png" alt="" class="needle" :class="{needle_1:!isbtnShow}">
            <img src="@/assets/cd.png" alt="" class="cd">
            <img :src="playList[playListIndex].al.picUrl" alt="" class="pic" :class="{pic_active:!isbtnShow,pic_paused:isbtnShow}">
        </div>
        <div class="detailLyric">
            {{lyric}}
        </div>
        <div class="detailFooter">
            <div class="footerTop">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-aixin1"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yinlechangpian"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31xiaoxi"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-"></use>
                </svg>

            </div>
            <div class="progressBar"></div>
            <div class="footerBottom">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiaoxunhuan"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shangyishoushangyige"></use>
                </svg>
                <svg class="icon bofang" aria-hidden="true" @click="play" v-if="isbtnShow">
                    <use xlink:href="#icon-bofanganniu"></use>
                </svg>
                <svg class="icon bofang" aria-hidden="true" @click="play" v-else>
                    <use xlink:href="#icon-zanting"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiayigexiayishou"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gf-playlistMusic"></use>
                </svg>

            </div>
        </div>

    </div>
</template>

<script>
import { mapState ,mapMutations} from 'vuex'
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { onMounted } from 'vue'
import {getMusicLyric} from '@/request/api.js'


export default {
   data() {
    return {
    lyric: []
    }
},
    components: {
    Vue3Marquee,
  },
    props:['play'],
    computed:{
        ...mapState(['playList','playListIndex','isbtnShow','playId'])
    },
    methods:{
        ...mapMutations(['updateIsbtnShow','updateDetailShow'])
    },
    async mounted(){
        let res = await getMusicLyric(this.playId)
        console.log('获取歌词');
        console.log(res);
        this.lyric=res.data.lrc
        console.log(this.lyric);
    }
}
</script>

<style lang="less" scoped>
.MusicDetail{
    width: 100%;
    height: 100%;
    .bigImg{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        filter: blur(70px);
        //  border-radius: 0.2rem;
    }
    .detailTop{
        display: flex;
        justify-content: space-around;
        margin-top: 15px;
        .icon{
            width: 30px;
            height: 30px;
        }
        .musicName{
            font-size: 16px;
            font-weight: 500;
            .audor{
            font-size: 14px;
            color: #fff;
        }
        }
    }
    .detailContent{
        width: 100%;
        height: 460px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .needle{
            width: 90px;
            position: absolute;
            top: 20px;
            right: 125px;
            transform-origin: 0 0;
            transform: rotate(-20deg);
            transition: all 1s;
        }
        .needle_1{
            width: 90px;
            position: absolute;
            top: 20px;
            right: 125px;
            transform-origin: 0 0;
            transform: rotate(-5deg);
            transition: all 1s;
        }
        .cd{
            position: absolute;
            top: 106px;
            z-index: -1;
            width: 250px;
            height: 250px
        }
        .pic{
            width: 160px;
            height: 160px;
            border-radius: 50%;
            position: absolute;
            top: 154px;
            animation: rotate_pic 10s linear infinite;
        }
        .pic_active{
            animation-play-state: running;
        }
        .pic_paused{
            animation-play-state: paused;
        }
        @keyframes rotate_pic {
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }
    }
    .detailFooter{
        width: 100%;
        position: absolute;
        bottom: 0;
        .footerTop{
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 80px;
            .icon{
                width: 30px;
                height: 30px;
                color: #fff;
            }
        }
        .progressBar{
            width: 100%;
            height: 3px;
            background-color: #fff;
        }
        .footerBottom{
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 80px;
            .icon{
                width: 30px;
                height: 30px;
                color: #fff;
            }
            .bofang{
                width: 60px;
                height: 60px;
            }
        }
    }

}
</style>